<template>
<view class="tobepaid">
  <view class="title">
    <text class="font-323232">已缴费总金额</text>
    <view class="font-6ccbb6">50.33<text class="font-323232"> 元</text></view>
  </view>
  <!-- 边框 -->
  <view class="com_border"></view>
  <view class="gh_info font-9c9c9d font15 gh_info_border">
    <text>就诊人</text>
    <view>何承阳</view>
  </view>
  <view class="gh_info font-9c9c9d font15 gh_info_border">
    <text>医生</text>
    <view>骨科 熊大</view>
  </view>
  <view class="gh_info font-9c9c9d font15 gh_info_border">
    <text>缴费时间</text>
    <view>2020-10-11 18:30</view>
  </view>
  <!-- 边框 -->
  <view class="com_border"></view>
  <view class="info">
    <view class="gh_info font-323232 font14 gh_info_border">
      <text>项目名称</text>
      <view>金额(元)</view>
    </view>
    <view class="gh_info font-9c9c9d font15" v-for="(item,index) in list" :key="index">
      <text>{{item.title}}</text>
      <view>{{item.money}}</view>
    </view>
  </view>
  <!-- 边框 -->
  <view class="com_border"></view>
</view>

</template>

<script>
	export default {
		data() {
			return {
				    //数据
				    list: [{
				      title: '感冒药', money: '20.00'
				    },
				    {
				      title: '葡萄糖液', money: '20.55'
				    },
				    {
				      title: '感冒药', money: '20.00'
				    },
				    {
				      title: '葡萄糖液', money: '20.55'
				    }]
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.tobepaid{
  padding-bottom: 200rpx;
}
/* 头部 */
.title{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 30rpx;
  font-weight: bold;
  padding: 40rpx 30rpx;
}
/* 就诊信息 */
.info{
  padding: 30rpx 0;
}
.gh_title {
  margin-top: 30rpx;
  padding-left: 25rpx;
}

.gh_info {
  display: flex;
  justify-content: space-between;
  width: 750rpx;
  padding: 20rpx 25rpx;

}

.gh_info_border{
  border-bottom: 1rpx #eeeeee solid;
}

.gh_info view {
  width: 520rpx;
  text-align: right;
}

.margin_top {
  margin-top: 30rpx;
}
</style>
